<template>
  <div>
    <van-nav-bar
        title="我的订阅"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
    <div class="boxbody">
      <van-collapse v-model="activeNames">
        <van-collapse-item title="已订阅" name="1">
          <van-swipe-cell v-for="(item,index) in listY" :key="index">
            <van-cell :border="false" :title="item.name" value="">
              <van-icon name="arrow-left"/>
            </van-cell>
            <template #right>
              <van-button square type="danger" text="移除" @click="deleteitem(item,index)"/>
            </template>
          </van-swipe-cell>
        </van-collapse-item>
        <van-collapse-item title="未订阅" name="2">
          <van-swipe-cell v-for="(item,index) in listW" :key="index">
            <van-cell :border="false" :title="item.name" value="">
              <van-icon name="arrow-left"/>
            </van-cell>
            <template #right>
              <van-button square type="primary" text="添加" @click="additem(item,index)"/>
            </template>
          </van-swipe-cell>
        </van-collapse-item>
      </van-collapse>
    </div>
  </div>
</template>

<script>

import {getNewsClassify, journalismlist, subscriptionlist} from "@/http/api";

export default {
  name: "Subscription",
  data() {
    return {
      activeNames: ['1', '2'],
      //已订阅
      listY: [],
      //未订阅
      listW: [],
      //过度数组
      list: [],
      listYid: []
    };
  },
  methods: {
    //已订阅
    deleteitem(item, index) {
      sessionStorage.removeItem('tabActive')
      this.listYid.splice(this.listYid.indexOf(item.categoryId), 1)
      this.listY.splice(index, 1)
      this.listW.push(item)
      journalismlist(this.listYid).then(res => {
        console.log(res)
      })
    },
    //未订阅
    additem(item, index) {
      sessionStorage.removeItem('tabActive')
      this.listYid.push(item.categoryId)
      this.listW.splice(index, 1)
      this.listY.push(item)
      journalismlist(this.listYid).then(res => {
        console.log(res)
      })
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    removal(Y, W) {
      Y.forEach((item1) => {
        W.forEach((item2, index2) => {
          if (item1.name == item2.name) {
            W.splice(index2, 1)
            this.listW = W
          }
        })
      })
    }
  },
  created() {

    //获取新闻分类列
    getNewsClassify().then(res => {

      this.list = res.data.rows.splice(0,17)
      // console.log( this.list)
      //已订阅列表
      subscriptionlist().then(res => {
        if (res.data.total == 0) {
          this.listY = []
          this.listW = this.list
        } else  {
          this.listY = res.data.rows
          this.removal(this.listY, this.list)
          this.listY.forEach((item1) => {
            this.listYid.push(item1.categoryId)
          })
        }
      })
    })
  }
}
</script>

<style scoped lang="less">
.boxbody {
  background-color: #f1f1f1;
  padding: 10px 0;
}
</style>